<template>
  <div>
  <h2 >任务列表</h2>
    <ol>
      <li v-for="(item,index) in bTask" :key="index" ref="list" style="">{{index+1}}. {{item.name}}</li>
    </ol>
  </div>

</template>

<script>
export default {
  name: "Task",
  props:{
    bTask:{
      type:Array,
      default() {
        return [];
      }
    }
  },
  data(){
    return{
      setI:"",
      setI1:"",
      setI2:"",
      add:0,
      reduce:4,
      Border:"2px solid white",
      BoxShadow:"1px 1px 20px white"

    }
  },
  mounted() {
    this.change()
    this.setI1 = setInterval(this.change,1000)
   this.setI = setInterval(this.addDate,1000)
    this.setI2 = setInterval(this.change1,1000)



  },
  beforeDestroy() {
    clearInterval(this.setI)
    clearInterval(this.setI1)
    clearInterval(this.setI2)
  },
  methods:{
    addDate(){
      if(this.add===5){
        this.add = -1
      }
      this.add++
    },
    reDate(){
      if(this.reduce===5){
        this.reduce= -1
      }
      this.reduce++
    },
    change(){
      this.$refs.list[this.add].style.boxShadow =this.BoxShadow
      this.$refs.list[this.add].style.border =this.Border
    },
    change1(){
      if (this.reduce===5){
        this.reduce = -1
      }
      this.reduce++
      this.$refs.list[this.reduce].style.boxShadow ="none"
      this.$refs.list[this.reduce].style.border ="none"
    }
  }
}
</script>

<style scoped>
h2{
  color: cyan;
}
li{
  font-size: larger;
  color: white;
  list-style: none;
}
li:nth-child(2n){
  background-color: rgba(255, 251, 240, 0.3);
}
</style>
